<template>
  <div class="op-container">
    <div class="Related_container">
      <label class="title_lable">安卓版本</label>
      <el-form :model="androidInfo" label-width="auto" class="form-modify">
        <el-form-item label="版本号：">
          <el-input :readonly="!authorityHandle(159)" v-model="androidInfo.version" placeholder="请输入版本号" />
        </el-form-item>
        <el-form-item label="版本描述：">
          <quill-editor
            ref="myQuillEditor"
            v-model.trim="androidInfo.describe"
            :options="editorOption"
            class="editer"
          />
        </el-form-item>
        <el-form-item v-if="authorityHandle(159)" label="安装包：">
          <k-upload-sdk-file
            ref="upload1"
            v-model="androidInfo.url"
            upload-style="btn"
            @successUpload="successUpload"
          />
          <span style="color: #b2b2b2">提示: 只能上传apk文件</span>
        </el-form-item>
      </el-form>
      <div class="footer">
        <button v-if="authorityHandle(159)" class="btnStyle" @click="setApkVersion">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import { setApkVersion, getApkVersion, setIosApkVersion, getIosApkVersion } from '@/api/settings/settings'
export default {
  components: {},
  data() {
    return {
      androidInfo: {
        url: undefined,
        version: undefined,
        describe: undefined
      },
      iOSInfo: {
        url: undefined,
        version: undefined,
        describe: undefined
      },
      editorOption: { //  富文本编辑器配置
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标
            [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
            [{ 'direction': 'rtl' }], // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
            [{ 'font': [] }], // 字体
            [{ 'align': [] }], // 对齐方式
            ['clean'], // 清除字体样式
            ['image'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  created() {
    this.getApkVersion()
    // this.getIosApkVersion()
  },
  methods: {
    successUpload(data) {
      this.$log(data)
      this.androidInfo.url = data
    },
    getIosApkVersion() {
      getIosApkVersion().then(res => {
        this.iOSInfo = res.data
      })
    },
    setIosApkVersion(e) {
      const target = e.target
      target.blur()
      setIosApkVersion(this.iOSInfo).then(res => {
        this.$message.success('保存成功')
      })
    },
    getApkVersion() {
      getApkVersion().then(res => {
        this.androidInfo = res.data
      })
    },
    setApkVersion(e) {
      const target = e.target
      target.blur()
      setApkVersion(this.androidInfo).then(res => {
        this.$message.success('保存成功')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText:#14162E; // 侧边栏字体颜色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
$mainColor:#3b425d;// 主色调
.op-container{
  margin: 20px;
    .title_lable{
      margin:0px 80px;
    }
  .Related_container {
    width: 50%;
    padding: 60px 0;
    border-radius: 10px;
    border: 1px dashed #ccc;
    margin: 50px auto 0;
    .el-input__inner:focus {
      border-color: #3b425d
    }
   .form-modify{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 30px 80px;
      .modify-right{
        margin-left: 80px;
      }
      ::v-deep .el-input__inner {
        // border-color: $mainColor;
        width: 200px;
      }
    }
  }
  .footer {
    text-align: center;
    margin-top: 30px;
  }

  .editer {
    width: 500px;
    border-radius: 8px;
    float: left;
    box-sizing: border-box;
    color: #606266;
    ::v-deep .ql-container {
      height: 270px;
      border-radius: 0px 0px 8px 8px;
    }
    ::v-deep .ql-toolbar.ql-snow {
      border-radius: 8px 8px 0px 0px;
    }

  }
}
</style>
